<template lang="pug">
.content
    .game_card(@mouseenter="show()" @mouseleave="hide()" @click="ToDetails()")
        img.game_card_header_img(:src="gi?.header_image")
        span.game_card_name {{gi?.name}}
        span.game_release_date {{gi?.release_date.date}}
        span.game_price_overview {{  gi?.is_free?"Free To Play" :gi?.price_overview.final_formatted}}
        span.game_price_overview {{gi?.disable?'disable':"yes"}}
    .game_card_hide(v-if="seen" )
        .single
        .game_card_hide_name {{gi?.name}}
        span {{gi?.release_date.date}}
        img(:src="gi?.screenshots[imgIndex].path_thumbnail"  )
        span User Tags
        .game_card_tags
            label(v-for="(item,index) in gi?.categories" ) {{item.description}}


</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {useRouter} from "vue-router";
import type {GameObj} from "../../../utils/types/Game";
import {GameInfoById} from "../../../reqApi/Game";
import type {ResultInfo} from "../../../utils/types/ResultInfo";

const show = () => {
    seen.value = true
}
const hide = () => {
    seen.value = false
}
const props = defineProps({
    appid: {
        type: Number,
        required: false,
    },
})
let seen = ref(false)


const gi = ref<GameObj>()
const router = useRouter();
const ToDetails = () => {
    const promise = router.resolve({
        name: `game`,
        params: {
            appid: props.appid
        }
    });
    window.open(promise.href, '_blank');
}

let imgIndex = ref<number>(0)
let interval: number

function setTime() {
    let index = 0
    interval = setInterval(() => {
        index++
        if (gi.value?.screenshots && gi.value?.screenshots.length > 0) {
            imgIndex.value = index % gi.value?.screenshots?.length;
        }
    }, 1500);
}

onMounted(() => {
    setTime()
    GameInfoById({
        app_id: props.appid!
    }).then(resp => {
        const result = resp.data as ResultInfo<GameObj>;
        if (result.success) {
            gi.value = result.data
        }

    })
})
onUnmounted(() => {
    clearInterval(interval)
})

</script>


<style lang="sass" scoped>
@import "../../../assets/sass/game/gameItemIdCard"

</style>
